<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 搜索条件 -->
                <el-form :inline="true" size="small">
                    <el-form-item label="患者姓名">
                        <el-input placeholder="请输入患者姓名" clearable="" v-model="registerForm.rsName"></el-input>
                    </el-form-item>
                    <el-form-item label="科室">
                        <el-select clearable="" v-model="registerForm.rsDepartmentId">
                            <el-option v-for="de in deList" :key="de.id" :label="de.deName" :value="de.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="日期<">
                        <el-date-picker type="date" placeholder="选择日期" clearable=""
                            v-model="registerForm.rsRegistrationTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search" circle type="primary" @click="queryList"></el-button>
                    </el-form-item>
                </el-form>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 表格 -->
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="id" label="id" v-if="false"></el-table-column>
                    <el-table-column prop="rsNo" label="挂号编号" v-if="false"></el-table-column>
                    <el-table-column prop="rsCaseId" label="患者id" v-if="false"></el-table-column>
                    <el-table-column prop="rsName" label="患者姓名"></el-table-column>
                    <el-table-column prop="rsAge" label="患者年龄" width="80px"></el-table-column>
                    <el-table-column prop="rsGender" label="患者性别" width="80px"></el-table-column>
                    <el-table-column prop="rsDepartment" label="科室"></el-table-column>
                    <el-table-column prop="rsWorker" label="医生"></el-table-column>
                    <el-table-column prop="rsRegistrationTime" label="预约时间"></el-table-column>
                    <el-table-column prop="rsStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.rsStatus == '1' ? 'danger' : (scope.row.rsStatus == '0' ? 'success' : 'primary')"
                                disable-transitions>
                                {{ scope.row.rsStatus == '0' ? '已缴费' : (scope.row.rsStatus == '1' ? '未缴费' : '退号') }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="reRegister(scope.row)" :disabled="scope.row.rsStatus==2 || scope.row.rsStatus==1">退号</el-button>
                            <el-button size="small" type="primary" @click="payMoney(scope.row.rsNo)" :disabled="scope.row.rsStatus==0 || scope.row.rsStatus==2">缴费</el-button>
                        </template>
                    </el-table-column>
                    
                </el-table>


            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[5, 10, 15, 20]">
                </el-pagination>

            </el-col>
        </el-row>

        <el-dialog title="缴费状态" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

    </div>

</template>

<script>
export default {
    data() {
        return {
            gridData: [],
            tableData: [],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            registerForm: {
                rsName: "",
                rsDepartmentId: "",
                rsRegistrationTime: ""
            },
            deList: [],
            dialogTableVisible: false
        }



    },
    methods: {
        nextPage(val) {
            //用户点击下一页触发
            this.pageNum = val;
            this.queryList();
        },
        prePage(val) {
            //上一页
            this.pageNum = val;
            this.queryList();
        },
        currentPage(val) {
            //当前页
            this.pageNum = val;
            this.queryList();
        },
        sizeChange(val) {
            this.pageNum = 1
            this.pageSize = val;
            this.queryList();
        },
        queryDe() {
            this.$axios.get("api/reigster/queryde")
                .then(res => {
                    this.deList = res.data.data
                })
        },
        queryList() {
            let pageparam = {}
            pageparam.pageNum = this.pageNum
            pageparam.pageSize = this.pageSize
            pageparam.param = this.registerForm
            this.$axios.post("api/reigster/queryrelist", pageparam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        this.tableData = res.data.data.list
                    }

                })
        },
        reRegister(register) {
            this.$confirm('确认退号吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //发退费请求
                this.$axios.post("api/reigster/refund", register)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("退费成功")
                        this.queryList()
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退号'
                });
            });
        },
        //传给后端编号id
        payMoney(rsNo){
            window.open("http://localhost:8092/alipay/num?rsNo="+rsNo);
            let param={}
            param.rsNo=rsNo
            this.$axios.post('api/alipay/num',param)
            .then(res=>{
                this.$message.success("缴费成功！")
               

            })
    

        }



    },
    created() {
        this.queryDe()
        this.queryList()

    }

}
</script>

<style scoped></style>